import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Layout } from 'antd';
import './App.css';

// Pages
import Home from './pages/Home';
import Register from './pages/Register';
import Login from './pages/Login';
import MovieDetail from './pages/MovieDetail';
import CinemaDetail from './pages/CinemaDetail';
import SeatSelection from './pages/SeatSelection';
import OrderConfirmation from './pages/OrderConfirmation';
import UserProfile from './pages/UserProfile';
import Cart from './pages/Cart';
import Favorites from './pages/Favorites';
import HelpCenter from './pages/HelpCenter';
import Orders from './pages/Orders';
import OrderConfirm from './pages/OrderConfirm';
import PaymentSuccess from './pages/PaymentSuccess';
import AdminDashboard from './pages/AdminDashboard';

// Components
import AppHeader from './components/AppHeader';
import AppFooter from './components/AppFooter';
import Movies from './components/Movies';
import Cinemas from './components/Cinemas';
import PrivateRoute from './components/PrivateRoute';

const { Content } = Layout;

function App() {
  return (
    <Router>
      <Layout className="layout">
        <AppHeader />
        <Content>
          <div className="site-layout-content">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/register" element={<Register />} />
              <Route path="/login" element={<Login />} />
              <Route path="/movies/:id" element={<MovieDetail />} />
              <Route path="/cinemas" element={<Cinemas />} />
              <Route path="/movies" element={<Movies />} />
              <Route path="/cinema/:id" element={<CinemaDetail />} />
              <Route 
                path="/screening/:screeningId/select-seats" 
                element={
                  <PrivateRoute>
                    <SeatSelection />
                  </PrivateRoute>
                } 
              />
              <Route 
                path="/order/confirm" 
                element={
                  <PrivateRoute>
                    <OrderConfirmation />
                  </PrivateRoute>
                } 
              />
              <Route 
                path="/profile" 
                element={
                  <PrivateRoute>
                    <UserProfile />
                  </PrivateRoute>
                } 
              />
              <Route 
                path="/orders" 
                element={
                  <PrivateRoute>
                    <Orders />
                  </PrivateRoute>
                } 
              />
              <Route 
                path="/cart" 
                element={
                  <PrivateRoute>
                    <Cart />
                  </PrivateRoute>
                } 
              />
              <Route 
                path="/favorites" 
                element={
                  <PrivateRoute>
                    <Favorites />
                  </PrivateRoute>
                } 
              />
              <Route path="/help" element={<HelpCenter />} />
              <Route path="/order/confirm" element={<OrderConfirm />} />
              <Route path="/payment/success" element={<PaymentSuccess />} />
              <Route 
                path="/admin" 
                element={
                  <PrivateRoute requiredRole="ADMIN">
                    <AdminDashboard />
                  </PrivateRoute>
                }
              />
            </Routes>
          </div>
        </Content>
        <AppFooter />
      </Layout>
    </Router>
  );
}

export default App;
